<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>游戏页面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/static/css/bootstrap-datetimepicker.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="${pageContext.request.contextPath }/static/jquery-1.10.2.min.js"></script>
    <script src="${pageContext.request.contextPath }/static/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/static/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
</head>
<body>
<div class="row">
    <div class="col-lg-6">
        <form action="${pageContext.request.contextPath }/role/list" method="get" class="form-inline" id="searchForm">
            <div class="form-group">
                <label>游戏</label>
                <select class="form-control" name="gameId">
                    <option value="">——请选择——</option>
                    <c:forEach items="${gameList}" var="item">
                        <option value="${item.id}" <c:if test="${item.id eq params.gameId}">selected="selected"</c:if>>${item.gameName}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="form-group">
                <label>角色名</label>
                <input type="text" class="form-control" name="roleName" value="${params.roleName}">
            </div>
            <div class="form-group span6">
                <label>注册时间</label>
                <input class="form-control" size="10" type="text" id="startTime" name="startTime" value="<fmt:formatDate value="${params.startTime}" pattern="yyyy-MM-dd"/>"> -
                <input class="form-control" size="10" type="text" id="endTime" name="endTime" value="<fmt:formatDate value="${params.endTime}" pattern="yyyy-MM-dd"/>">
            </div>
            <div class="form-group">
                <label>状态</label>
                <select class="form-control" name="status">
                    <option value="">——请选择——</option>
                    <option value="1" <c:if test="${params.status eq '1'}">selected="selected"</c:if>>正常</option>
                    <option value="2" <c:if test="${params.status eq '2'}">selected="selected"</c:if>>禁用</option>
                </select>
            </div>
            <div class="form-group">
                <button type="submit">查询</button> <button type="button" class="btn btn-success" onclick="add()">添加</button>
            </div>
        </form>

        <table class="table table-striped table-bordered" style="margin-top:20px">
            <tr>
                <td>角色ID</td>
                <td>角色名</td>
                <td>角色等级</td>
                <td>所属游戏</td>
                <td>注册日期</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <c:forEach items="${pageInfo.list}" var="item">
            <tr>
                <td>${item.roleId}</td>
                <td>${item.roleName}</td>
                <td>${item.roleGrade}</td>
                <td>${item.game.gameName}</td>
                <td><fmt:formatDate value="${item.recordDate}" pattern="yyyy-MM-dd"/></td>
                <td>${item.status eq "1"?"正常":"禁用"}</td>
                <td><a href="${pageContext.request.contextPath }/role/update-ui/${item.roleId}">修改</a> <a href="${pageContext.request.contextPath}/role/delete/${item.roleId}">删除</a><h5 style="color: #bd1f1d">${deleteInfo}</h5></td>
            </tr>
            </c:forEach>
        </table>

        <ul class="pagination">
            <!--不可点击的样式-->
            <li><a href="javascript:void(0);" onclick="page(1)">首页</a></li>
            <li><a href="javascript:void(0);" onclick="page(${pageInfo.pageNum-1})">上一页</a></li>
            <!--当前页-->
            <c:forEach items="${pageInfo.navigatepageNums}" var="item">
            <li class="${item==pageInfo.pageNum?'active':''}" ><a href="javascript:void(0);" onclick="page(${item})">${item}</a></li>
            </c:forEach>
            <li><a href="javascript:void(0);" onclick="page(${pageInfo.pageNum+1})">下一页</a></li>
            <li><a href="javascript:void(0);" onclick="page(${pageInfo.pages})">末页</a></li>
        </ul>
    </div>
</div>
<script>
    $(function () {
        $('#startTime').datetimepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            minView: 2
        });
        $('#endTime').datetimepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            minView: 2
        });
    })
    function page(pageNum) {
        location.href = "/role/list?pageNum=" + pageNum;
    }
    function add() {
        location.href= "${pageContext.request.contextPath}/role/insert-ui";
    }
</script>
</body>

</html>
